<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            width: 345px;
            height: 480px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        
        .bottom {
            position: absolute;
            top: 420px;
        }
        
        .bird img {
            position: absolute;
            top: 200px;
            left: 100px;
        }
        
        .pillars {
            /* width: 100%; */
            height: 100%;
            position: absolute;
            top: 0;
            width: 50px;
            /* right: 350px; */
        }
        
        .pillars img {
            position: absolute;
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="bg"><img src="./img/bg.jpg" alt="">
        <!-- <div></div> -->
        <!-- <div class="pillars"></div> -->
        <div class="bottom"><img src="./img/bottom.jpg" alt=""></div>
        <div class="bird"><img src="./img/bird.png" alt=""></div>
    </div>

</body>

</html>
<script>
    var pillars = document.querySelector(".pillars");
    var bg = document.querySelector(".bg");
    var bird = document.querySelector(".bird img");



    // 随机数 
    function gao() {
        return Math.floor(Math.random() * 150 + 50);
    }
    // 创建柱子
    function zhuzi() {
        var l = 0;
        var gao1 = gao();
        var pillars = document.createElement("div");
        pillars.className = "pillars";
        pillars.style.right = "-100px"
        bg.appendChild(pillars);
        var zhuziTop = document.createElement("img");
        var zhuziBottom = document.createElement("img");
        zhuziTop.src = "./img/up_pipe.png";
        zhuziBottom.src = "./img/down_pipe.png";
        zhuziTop.style.height = gao1 + "px";
        zhuziBottom.style.height = 330 - gao1 + "px";
        zhuziBottom.style.bottom = 0 + "px";
        pillars.appendChild(zhuziTop);
        pillars.appendChild(zhuziBottom);
        console.log(zhuziTop.offsetWidth);
        // 管道移动
        var guanyi = setInterval(function() {
                l += 3;
                pillars.style.right = l + "px";
                if (l > 450) {
                    clearInterval(guanyi);
                    console.log("hh");
                    pillars.remove();
                }
            }, 100)
            // 点击事件

        bg.onclick = function() {
                bird.src = "./img/up_bird.png";
                // console.log(bird.offsetTop);
                bird.style.top = bird.offsetTop - 60 + "px";
                if (bird.offsetTop < 0) {
                    bird.style.top = 0;
                }
            }
            // 小鸟下降
        clearInterval(bird.xia);
        bird.xia = setInterval(function() {
            bird.src = "./img/down_bird.png"
            bird.style.top = bird.offsetTop + 10 + "px";
            if (bird.offsetTop > bg.offsetHeight - bird.offsetHeight) {
                clearInterval(bge);
                clearInterval(bird.xia);
                clearInterval(guanyi);
                console.log("kk")
                pillars.remove();
            } // 碰撞检测;
            // 碰撞条件
            var maxleft = bird.offsetLeft + bird.offsetWidth;
            var minleft = bird.offsetLeft - pillars.offsetWidth;
            // console.log(bird.offsetTop, zhuziTop.offsetHeight, zhuziTop.offsetHeight + 150);
            // console.log(pillars.offsetLeft);

            if (bird.offsetTop < zhuziTop.offsetHeight || bird.offsetTop > zhuziTop.offsetHeight + 150) {
                if (pillars.offsetLeft > minleft && pillars.offsetLeft < maxleft) {
                    clearInterval(bge);
                    clearInterval(bird.xia);
                    clearInterval(guanyi);
                    bg.onclick = function() {
                        null
                    };
                    console.log(maxleft, minleft, bird.offsetTop, zhuziTop.offsetHeight, pillars.offsetLeft);
                }

            } else {
                // console.log("撞到了")
            }
        }, 100);
        // 碰撞检测;
        // bird.offsetTop


    }
    // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


    zhuzi();
    var bge = setInterval(zhuzi, 8000);
</script>